<!DOCTYPE html>
<html class="x-admin-sm">

<head>
<meta charset="UTF-8">
<title>欢迎页面-X-admin2.2</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
<link rel="stylesheet" href="./css/font.css">
<link rel="stylesheet" href="./css/xadmin.css">
<script src="./lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="./js/xadmin.js"></script>
<!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
	<script>
        var USER=JSON.parse(window.sessionStorage.getItem("USER_LOGIN"));


	</script>

</head>

<body>
	<div class="x-nav">
		<span class="layui-breadcrumb"> <a href="index.html">首页</a> <a href="">管理员</a>
			<a> <cite>管理员列表</cite></a>
		</span> <a class="layui-btn layui-btn-small"
			style="line-height: 1.6em; margin-top: 3px; float: right"
			onclick="location.reload()" title="刷新"> <i
			class="layui-icon layui-icon-refresh" style="line-height: 30px"></i>
		</a>
	</div>
	<div class="layui-fluid">
		<div class="layui-row layui-col-space15">
			<div class="layui-col-md12">
				<div class="layui-card">
					<div class="layui-card-body ">
						<form class="layui-form layui-col-space5">
							<div class="layui-inline layui-show-xs-block">
								<input class="layui-input" autocomplete="off" placeholder="开始日"
									name="start" id="start">
							</div>
							<div class="layui-inline layui-show-xs-block">
								<input class="layui-input" autocomplete="off" placeholder="截止日"
									name="end" id="end">
							</div>
							<div class="layui-inline layui-show-xs-block">
								<input type="text" name="username" placeholder="请输入用户名"
									autocomplete="off" class="layui-input">
							</div>
							<div class="layui-inline layui-show-xs-block">
								<button class="layui-btn" lay-submit lay-filter="sreach">
									<i class="layui-icon">&#xe615;</i>
								</button>
							</div>
						</form>
					</div>
					<div class="layui-card-body ">
						<table class="layui-table" width="100%"
							lay-data="{url:'usersearch',page:true,toolbar: '#toolbarDemo',id:'queryTable'}"
							lay-filter="queryTable">
							<thead>
								<tr>
									<th lay-data="{type:'checkbox'}">ID</th>
									<th lay-data="{field:'id', width:80, sort: true}">ID</th>
									<th
										lay-data="{field:'userName', width:120, sort: true, edit: 'text'}">用户名</th>
									<th lay-data="{field:'name', edit: 'text', minWidth: 150}">真实姓名</th>

									<th lay-data="{field:'telephone', edit: 'text', minWidth: 100}">电话</th>
									<th lay-data="{field:'landMark', sort: true, edit: 'text'}">坐标</th>
									<th lay-data="{field:'unit', sort: true, edit: 'text'}">所属单位</th>
									<th lay-data="{field:'roleName', sort: true, edit: 'text'}">角色</th>
									<th lay-data="{field:'enterdate', sort: true, edit: 'text'}">入职时间</th>
									<th lay-data="{templet: '#newsListBar',minWidth:300}">操作</th>
							</thead>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
	<script type="text/html" id="toolbarDemo">
        <div class = "layui-btn-container" > 
			<button class = "layui-btn layui-btn-sm" lay-event = "addNewUser" >
			<i class="layui-icon">&#xe654;</i>
			 添加用户
			 </button>
			<button class = "layui-btn layui-btn-sm" lay-event = "delBatch" > 批量删除 </button>
            <!--
            <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button > 
            <button class = "layui-btn layui-btn-sm" lay-event = "isAll" > 验证是否全选</button>-->
        </div>
    </script>
    <!--操作-->
	<script type="text/html" id="newsListBar">
		{{# if ( USER.role==1 || USER.id==d.id) { }}
		<a class="layui-btn layui-btn-xs" id="edit" lay-event="edit">编辑</a>

		<a class="layui-btn layui-btn-xs layui-btn-primary" id="look" lay-event="look">详情</a>
		<a class="layui-btn layui-btn-xs" id="updatepassword" lay-event="updatepassword" >一键改密</a>
		{{# } }}
		<!--不允许删除自己，只能删除比自己级别低的人-->
		{{# if ( USER.role>d.role && USER.id!=d.id) { }}
		<a class="layui-btn layui-btn-xs layui-btn-danger" id="del" lay-event="del">删除</a>
		{{# } }}
	</script>
	
	<script type="text/html" id="switchTpl">
        <!-- 这里的checked的状态只是演示 -->
        <input type = "checkbox" name = "sex" value = "{{d.id}}" lay-skin = "switch"lay-text = "女|男" lay-filter = "sexDemo" {{ d.id == 10003 ? 'checked': ''}} >
    </script>

<script>
	layui.use(['table','form','layer','laydate'], function() {
		var table = layui.table;
		var form=layui.form;
		var layer=layui.layer;
		var $=layui.$;
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem : '#start' //指定元素
            ,trigger: 'click'
        });

        //执行一个laydate实例
        laydate.render({
            elem : '#end' //指定元素
            ,trigger: 'click'
        });

        //超时自动回到首页
        $.ajaxSetup({
            complete:function(XMLHttpRequest,textStatus){
                alert(textStatus);
                if(textStatus=="parsererror"){
                    window.top.location.href = 'login.html';
                } else if(textStatus=="error"){
                    $.messager.alert('提示信息', "请求超时！请稍后再试！", 'info');
                }
            }
        });

		//
		//查询
		form.on("submit(sreach)",function(data){
			 
			table.reload("queryTable", {
				page : {
					curr : 1
				//重新从第 1 页开始
				},
				where : {
					name : $("input[name=username]").val(), //搜索的关键字
					startDate : $("input[name=start]").val(),
					endDate : $("input[name=end]").val()
				}
			});
			return false;
		});
		//监听单元行
		table.on('tool(queryTable)',function(obj){
			var layEvent = obj.event;
			var data=obj.data;
			//alert(" case :"+layEvent);
			//删除
			//编辑
			//xxx.html?3;
			//alert(location.search);//?3
			//window.sessionStorage.setItem(name, value)
			if(layEvent=="edit"){
				edit(data);
			} 
			event.stopPropagation();
			//return false;
		}); 
		//再添加一个点击监听事件，防止因为按钮过多， 省略号隐藏的按钮没有事件 
		/*table.on('row(queryTable)', function(obj){
            var data = obj.data;
         	
            $(document).on("click","#edit",function(event){
                //alert("edit");
                edit(data);
                event.stopPropagation();//阻止事件冒泡，防止多次执行
                return false;
            });
            $(document).on("click","#look",function(){
                alert("look");
                //look
            });
            $(document).on("click","#del",function(){
                //alert("del");
                //del
				var d=[data];//封装成数组
                deleteAll(d);//
            });
            $(document).on("click","#updatepassword",function(event){
                alert("updatepassword");
                //update
                 event.stopPropagation();
            });
            return false;
        }); */
		function edit(data){
			var id=data.id;
			//alert(id);
			xadmin.open('修改用户','./user-edit.html?'+id,600,400);
		}
		
		
		//监听单元格编辑，没有用上
		table.on('edit(queryTable)', function(obj) {
			var value = obj.value //得到修改后的值
			, data = obj.data //得到所在行所有键值
			, field = obj.field; //得到字段
			layer.msg('[ID: ' + data.id + '] ' + field + ' 字段更改为：' + value);
		});

		function deleteAll(data){
            if (data.length == 0) {
                return;
            }
		    var ids=[];
            for (var i in data) {
                ids.push(data[i].id);
            }
            alert(ids);
            //
            layer.confirm('确定删除选中的用户？', {
                icon : 3,
                title : '提示信息'
            }, function(index) {
                $.getJSON("batchDel", {
                    ids:ids
                }, function(d) {
                    if (d.code==0) {
                        location.reload();
                    } else {
                        layer.alert("删除失败");
                    }
                });
            })
			//
		}
		//头工具栏事件
		table.on('toolbar(queryTable)', function(obj) {
			var checkStatus = table.checkStatus(obj.config.id);
			switch (obj.event) {
			case 'addNewUser':
				xadmin.open('添加用户','./user-add.html',600,400);
			break;
			case 'delBatch':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                	deleteAll(data);
				    break;
			case 'getCheckData':
				var data = checkStatus.data;
				layer.alert(JSON.stringify(data));
				break;
			case 'getCheckLength':
				var data = checkStatus.data;
				layer.msg('选中了：' + data.length + ' 个');
				break;
			case 'isAll':
				layer.msg(checkStatus.isAll ? '全选' : '未全选');
				break;
			}
			;
		});
	});
</script>

</html>